<template>
    <div>
        <Modal :title="modalTitle" v-model="modalShow" :width="modalWidth">
          <Alert>
            <Form :model="searchObj" inline>
              <FormItem>
                <Button :loading="btnLoading" class="search-btn" type="primary" @click="exportBtn">
                  <Icon type="ios-download-outline"/>
                  数据导出
                </Button>
              </FormItem>
            </Form>
          </Alert>
          <Row>
            <Table ref="table" :loading="tableLoading" border max-height="600" :columns="tableColumns" :data="tableData"
                   size="small">
              <template slot="state" slot-scope="{ row }">
                <span>{{stateList[row.state]}}</span>
              </template>
              <template slot="time" slot-scope="{ row }">
                <span v-if="row.state == '1' || row.state == '81'">
                  <span>{{time(row.item_time)}} 小时</span>
                </span>
                    <span v-if="row.state == '2' || row.state == '3'">
                  <span>{{times(row.item_num/60)}} 小时</span>
                </span>
                    <span v-if="row.state == '9' || row.state == '0'|| row.state == '7'|| row.state=='8'">
                  <span>0小时</span>
                </span>
              </template>
              <template slot="createInfo" slot-scope="{ row }">
                <span>{{row.create_byname}}（{{row.company_name}}）</span>
              </template>
              <template slot="acceptInfo" slot-scope="{ row }">
                <span>{{row.handle_byname}}（{{row.accept_company_name}}）</span>
              </template>
            </Table>
          </Row>
          <br>
          <Row type="flex" justify="end">
            <Page show-sizer show-elevator show-total :current="pageObj.pageNo" :page-size="pageObj.pageSize" :total="pageObj.totalRecord"
                  @on-change="getPageNo" :page-size-opts="[10,20,50,200]" @on-page-size-change="pageSizeChange"/>
          </Row>
            <div slot="footer">
                <Button type="text" @click="cancelOption">关闭</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import {
  getPeriodOneList,
  getPeriodToExcelList
} from '@/api/eventlist'
export default {
  name: 'glpmModal',
  props: {
    modalTitle: {
      type: String,
      default: () => {
        return ''
      }
    },
    modalType: {
      type: String,
      default: () => {
        return 'info'
      }
    },
    modalWidth: {
      type: Number,
      default: () => {
        return 1000
      }
    },
    dataObj: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      searchObj: {},
      modalShow: false,
      btnLoading: false,
      formItem: {},
      stateList: {
        null: '全部',
        '9': '待提报',
        '0': '待受理',
        '1': '办理中',
        '8,81,82': '转件中',
        '7': '待办结',
        '2': '办结成功',
        '3': '办结失败'
      },
      tableColumns: [
        {
          title: '序号',
          type: 'index',
          width: 70,
          align: 'center'
        },
        {
          title: '事项名称',
          key: 'title',
          tooltip: true,
          width: 250,
          align: 'center'
        },
        {
          title: '业务编号',
          key: 'code',
          tooltip: true,
          width: 250,
          align: 'center'
        },
        {
          title: '申请人',
          key: 'name',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '手机号',
          key: 'mobile',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '身份证',
          key: 'cardno',
          tooltip: true,
          width: 200,
          align: 'center'
        },
        {
          title: '状态',
          slot: 'state',
          width: 200,
          align: 'center'
        },
        {
          title: '申请时间',
          key: 'create_time',
          width: 200,
          align: 'center'
        },
        {
          title: '办结时长',
          slot: 'time',
          width: 200,
          align: 'center'
        },
        {
          title: '经办人（社区）',
          slot: 'createInfo',
          width: 200,
          align: 'center'
        },
        {
          title: '受理人（社区）',
          slot: 'acceptInfo',
          width: 200,
          align: 'center'
        }
        // {
        //   title: '操作',
        //   slot: 'action',
        //   fixed: 'right',
        //   width: 130,
        //   align: 'center'
        // }
      ],
      exportColumns: [
        { title: '序号', key: 'index' },
        { title: '事项名称', key: 'title' },
        { title: '业务编号', key: 'code' },
        { title: '申请人', key: 'name' },
        { title: '手机号', key: 'mobile' },
        { title: '身份证', key: 'cardno' },
        { title: '状态', key: 'state_name' },
        { title: '申请时间', key: 'create_time' },
        { title: '办结时长', key: 'time_name' },
        { title: '经办人（社区）', key: 'create_info' },
        { title: '受理人（社区）', key: 'accept_info' }
      ],
      tableData: [],
      selectData: [],
      tableLoading: false,
      pageObj: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      }
    }
  },
  methods: {
    modalAction () {
      this.modalShow = !this.modalShow
    },
    cancelOption () {
      this.modalShow = false
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.init()
    },
    pageSizeChange (e) {
      this.pageObj.pageSize = e
      this.init()
    },
    initPage () {
      this.pageObj.pageNo = 1
    },
    searchAction () {
      this.initPage()
      this.init()
    },
    times (date) {
      let data = date.toString().substring(0, 3)
      if (data.endsWith('0') && data.length > 1) {
        data = data.substring(0, data.length - 1)
      }
      if (data.endsWith('.')) {
        data = data.substring(0, data.length - 1)
      }
      return data
    },
    time (date) {
      let oldTime = new Date(date).getTime()
      let now = new Date().getTime()
      let time = (now - oldTime) / 3600000
      let data = time.toString().substring(0, time.toString().lastIndexOf('.') + 2)
      if (data.endsWith('0')) {
        data = data.substring(0, data.length - 1)
      }
      if (data.endsWith('.')) {
        data = data.substring(0, data.length - 1)
      }
      return data
    },
    init () {
      const param = {
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize,
        type: this.$common.xeUtils.trim(this.dataObj.type),
        up_id: this.$common.xeUtils.trim(this.dataObj.up_id),
        item_id: this.$common.xeUtils.trim(this.dataObj.item_id),
        start_time: this.$common.xeUtils.trim(this.dataObj.start_time),
        end_time: this.$common.xeUtils.trim(this.dataObj.end_time)
      }
      this.tableLoading = true
      getPeriodOneList(param).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableData = data.data.results
          this.pageObj.totalRecord = data.data.totalRecord
          this.tableLoading = false
        } else {
          this.error(data)
          this.tableLoading = false
        }
      })
    },
    exportBtn () {
      this.$Modal.confirm({
        title: '确认导出全部数据么？',
        content: '',
        loading: true,
        onOk: () => {
          this.exportAction()
        }
      })
    },
    exportAction () {
      const param = {
        type: this.$common.xeUtils.trim(this.dataObj.type),
        up_id: this.$common.xeUtils.trim(this.dataObj.up_id),
        item_id: this.$common.xeUtils.trim(this.dataObj.item_id),
        start_time: this.$common.xeUtils.trim(this.dataObj.start_time),
        end_time: this.$common.xeUtils.trim(this.dataObj.end_time)
      }
      // this.btnLoading = true
      getPeriodToExcelList(param).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          let exportData = data.data
          this.$refs.table.exportCsv({
            filename: this.dataObj.title + '人员信息',
            columns: this.exportColumns,
            data: exportData.map((item, index) => {
              // 序号
              item.index = index + 1
              // 状态
              item.state_name = this.stateList[item.state]
              // 办结时长
              if (item.state === '1' || item.state === '81') {
                item.time_name = this.time(item.item_time) + '小时'
              } else if (item.state === '2' || item.state === '3') {
                item.time_name = this.times(item.item_num / 60) + '小时'
              } else {
                item.time_name = '0小时'
              }
              // 经办人（社区）
              item.create_info = item.create_byname + '（' + item.company_name + '）'
              // 受理人（社区）
              item.accept_info = item.handle_byname + '（' + item.accept_company_name + '）'
              return item
            }),
            original: false
          })
          this.btnLoading = false
          this.$Modal.remove()
        } else {
          this.error(data)
          this.btnLoading = false
          this.$Modal.remove()
        }
      })
    }
  },
  mounted () {
    // this.init()
  },
  watch: {
    dataObj () {
      this.init()
    }
  },
  computed: {}
}
</script>

<style lang="less" scoped>
  /deep/ .ivu-form-item {
    margin-bottom: 0px;
  }
</style>
